<template>
  <scroller
    class="main"
    :on-refresh="refresh"
    :on-infinite="infinite">
    <div class="waterfalls">
      <!--瀑布流左边部分-->
      <ul>
        <router-link to="/view/posterDetail">
        <li class="photo" v-for="item in waterfallsLeft" :key="item.id + item.albumId+Math.random()">
          <a href="javascrip:;">
            <img :src="item.src" alt="">
          </a>
          <!--<div class="desc-info">-->
          <!--<p>编号：<span>{{item.albumId}}</span></p>-->
          <!--</div>-->
          <div class="thumbnail">
            <p>双语小学</p>
          </div>
        </li>
        </router-link>
      </ul>
      <!--瀑布流右边部分-->
      <ul>
        <router-link to="/view/posterDetail">
        <li class="photo" v-for="item in waterfallsRight" :key="item.id + item.albumId+Math.random()">
          <a href="javascrip:;">
            <img :src="item.src" alt="">
          </a>
          <!--<div class="desc-info">-->
          <!--<p>编号：<span>{{item.albumId}}</span></p>-->
          <!--</div>-->
          <div class="thumbnail">
            <p>双语小学</p>
          </div>
        </li>
        </router-link>
      </ul>
    </div>
  </scroller>
</template>
<!--http://www.cnblogs.com/zhuhuoxingguang/p/9268587.html-->
<!--瀑布流组件-->
<script>
  import axios from "axios";

  export default {
    name: 'Waterfalls',
    data() {
      return {
        list: [],
        waterfallsLeft: [],  //  存储在左侧的数据
        waterfallsRight: [],//  存储在右侧的数据
        leftHeight: 0,      //  存储相同宽度情况下，左侧图片的高度
        rightHeight: 0,     //  存储相同宽度情况下，右侧图片的高度
        flag: 0,            //  标志位：检测请求回的数据当中图片是否已经全部加载完毕
        itemsLen: -1,       //  标志位：请求回来的数据条数
        page: 1,            //  无限加载，模拟分页
        pageCount: 10,      //  分页加载每页的条数,
      };
    },
    methods: {
      refresh(done) {
        window.location.reload();
      },

      infinite(done) {
        this.$nextTick(function () {
          this.getData(done);
        })
      },
      //获取图片数据
      getData(done) {
        let _this = this;
        axios.get("https://jsonplaceholder.typicode.com/photos", {page: this.page})
          .then(res => res.data)
          .then(res => {
            // console.log(this.page)
            let counts = res.slice((this.page - 1) * this.pageCount, this.page * this.pageCount);
            counts.forEach((item, index) => {
              item.src = 'http://cued.xunlei.com/demos/publ/img/P_' + this.randomNum() + '.jpg'
            });
            this.page++;
            this.itemsLen = counts.length;
            this.judgeAllLoaded(counts, done);
          })
      },
      //三位数随机数，162以内
      randomNum() {
        let random = Math.floor(Math.random() * 162);
        return random = random < 10 ? '00' + random : random < 100 ? '0' + random : '' + random;
      },
      /*
      * 判断所有图片是否加载完成
      * */
      judgeAllLoaded(items, done) {
        let _this = this;
        this.$nextTick(function () {
          items.forEach(item => {
            let IMG = new Image();
            IMG.src = item.src;
            IMG.width = 100;
            IMG.onload = function () {
              _this.flag++;
              if (_this.flag === _this.itemsLen) {
                // 这段是标志位，标识这一次的滑动请求完成
                // 之前的这一段是直接放在异步请求函数里面的，产生的结果就是在某些时候，一次滑动会发送一次或者一次以上请求
                // 由于图片加载有异步过程，在所有图片加载完成之后，再标识本次请求结束，避免出现多次请求
                this.bottom = this.bottom + 10;
                if (done) done();
              }
              // 滑动加载之后，恢复标识图片加载完成的数据
              if (_this.flag > _this.itemsLen) {
                _this.flag = 1;
              }
              if (_this.leftHeight <= _this.rightHeight) {
                _this.leftHeight += IMG.height;
                _this.waterfallsLeft.push(item)
              } else {
                _this.rightHeight += IMG.height;
                _this.waterfallsRight.push(item)
              }
            }
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .main {
    margin-top: 80px;
    padding: 5px 10px;
    box-sizing: border-box;
    background-color: white;
    .waterfalls {
      margin: 0 -5px;
      box-sizing: border-box;
      overflow: hidden;
      ul {
        width: 50%;
        float: left;
        box-sizing: border-box;
        padding: 0 5px;
      }
      .photo {
        margin-bottom: 10px;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        a {
          display: inline-block;
          img {
            width: 100%;
          }
        }

        .thumbnail {
          display: block;
          position: relative;
          padding-right: 10px;
          width: 100%;
          height: 44px;
          line-height: 44px;
          background-color: rgba(255, 255, 255, 1);
          box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.14);
          p {
            text-align: center;
            font-size: 16px;
            color: #292929;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

        }

      }

    }

  }


</style>
